<template>
  <div class="forget">
    <van-nav-bar
      title="找回密码"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-steps :active="active" style="padding: 20px 30px; font-size: 20px">
      <van-step>验证手机号</van-step>
      <van-step>重置密码</van-step>
    </van-steps>
    <div class="container">
      <van-form ref="form1" v-show="active == 0">
        <van-cell-group inset class="item">
          <van-field
            v-model="username"
            label="用户名"
            :clearable="true"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
        </van-cell-group>
        <van-cell-group inset class="item">
          <van-field
            v-model="phone"
            label="手机号"
            :clearable="true"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' },
            ]"
          />
        </van-cell-group>
        <van-cell-group inset class="item">
          <van-button type="info" block @click="next">下一步</van-button>
        </van-cell-group>
      </van-form>

      <van-form ref="form2" v-show="active == 1">
        <van-cell-group inset class="item">
          <van-field
            v-model="newPwd"
            label="新密码"
            :clearable="true"
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请输入新密码' }]"
          />
        </van-cell-group>
        <van-cell-group inset class="item">
          <van-button type="primary" block @click="submit">提交</van-button>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>

<script>
import { resetPwd, verifyPhone } from "@/api/mobile/user";

export default {
  name: "ForgetPwdView",
  data() {
    return {
      active: 0,
      username: "",
      phone: "",
      newPwd: "",
    };
  },
  methods: {
    // 下一步 -> 验证手机号
    async next() {
      await this.$refs.form1.validate();
      await verifyPhone({ username: this.username, phone: this.phone });
      this.active++;
    },
    // 提交 -> 修改密码
    async submit() {
      await this.$refs.form2.validate();
      await resetPwd({ username: this.username, password: this.newPwd });
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.forget {
  height: 100vh;
  background-color: #fff;
  .container {
    .item {
      margin-bottom: 24px;
      box-shadow: 0 0 4px #ccc;
    }
  }
}
/deep/.van-step__title {
  font-size: 15px;
}
</style>